<template>
  <div>
    <el-header>
      <f-header></f-header>
    </el-header>
    <el-row class="main" type="flex" justify="center">
      <el-col :span="12">
        <div id="artcle-info">
          <el-card>
            <div class="personal-info">
              <div class="info">
                <el-upload
                  class="avatar-uploader"
                  action="http://localhost:9000/forum/posts/updateUserAvatar"
                  :data="{
                    userId: $store.state.userInfo.id,
                  }"
                  name="multipartFile"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <el-tooltip content="更换头像" placement="top" effect="light">
                    <img class="picture-avatar" :src="user.avatar" />
                  </el-tooltip>
                </el-upload>
              </div>
              <div class="info info-span">
                <h3>{{ user.username }}</h3>
                <h4 style="color:#60a3bc;">{{ user.introduce }}</h4>
              </div>

              <div class="button-collect">
                <el-button round v-if="user.id != $store.state.userInfo.id"
                  >已关注</el-button
                >
              </div>
            </div>
          </el-card>
        </div>
        <el-tabs type="border-card">
          <el-tab-pane label="个人信息">
            <div id="artcle-comment">
              <el-card>
                <el-divider content-position="left">
                  <span style="font-size:17px">个人信息</span>
                </el-divider>

                <div class="div-info">
                  <ul id="ul-info">
                    <li>
                      <span>用户名：{{ user.username }}</span>
                    </li>
                    <li>
                      <span>电话：{{ user.phone }}</span>
                    </li>
                    <li>
                      <span>email：{{ user.email }}</span>
                    </li>
                    <li>
                      <span v-if="user.status == 1">帐号状态：正常</span>
                      <span v-if="user.status == 0">帐号状态：未激活</span>
                    </li>
                    <li>
                      <span>注册时间：{{ user.createTime }}</span>
                    </li>
                    <li>
                      <span>获赞：{{ user.allLike }}</span>
                    </li>
                    <li>
                      <span>粉丝：{{ user.fans }}</span>
                    </li>
                    <li>
                      <span style="color:#aaa"
                        >个性签名：{{ user.introduce }}</span
                      >
                    </li>
                  </ul>
                </div>
                <el-divider content-position="right">
                  <el-button
                    type="primary"
                    @click="dialogFormVisible = true"
                    v-show="isMe"
                    >修改信息</el-button
                  >
                </el-divider>
              </el-card>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的文章">
            <el-col>
              <MypostList :categoryId="categoryId"></MypostList>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="我的收藏">
            <el-col>
              <el-row class="art-item">
                <ul class="list">
                  <li
                    v-for="item in collectionList"
                    v-bind:key="item"
                    class="list-item"
                  >
                    <el-card shadow="hover">
                      <router-link
                        :to="{ name: '详情', params: { postsId: item.postId } }"
                      >
                        <h3>
                          <span class="art-title">
                            {{ item.posts.title }}
                          </span>
                          <el-tag size="mini">{{
                            item.posts.description
                          }}</el-tag>
                        </h3>
                      </router-link>
                      <el-row class="art-body">
                        <div class="side-abstract">
                          <div class="art-abstract">
                            {{ item.posts.content }}
                          </div>
                        </div>
                      </el-row>
                      <el-row class="art-info">
                        <div class="message" id="box">
                          <ul class="msg-ul">
                            <li class="msg">
                              <router-link to="/userInfo">
                                <div>
                                  <img
                                    class="picture"
                                    :src="item.posts.user.avatar"
                                  />
                                  <i style="line-height:30px;color:#aaa;">{{
                                    item.posts.user.username
                                  }}</i>
                                </div>
                              </router-link>
                            </li>
                            <li class="msg">
                              <span class="el-icon-time">{{
                                item.posts.createTime
                              }}</span>
                            </li>
                            <li class="msg">
                              <i class="el-icon-view">{{ item.posts.views }}</i>
                            </li>
                            <li class="msg">
                              <i class="el-icon-chat-dot-square"> </i>
                            </li>
                            <el-popconfirm
                              title="确定取消收藏吗？"
                              @onConfirm="DeleteCollection(item.id)"
                            >
                              <el-button slot="reference" style="float:right;"
                                >取消收藏</el-button
                              >
                            </el-popconfirm>
                          </ul>
                        </div>
                      </el-row>
                    </el-card>
                  </li>
                </ul>
              </el-row>
            </el-col>
          </el-tab-pane>
          <el-tab-pane label="我的关注">
            <ul class="base-info">
              <li
                class="name"
                :style="{ fontSize: !isHeadProfile && '18px' }"
                v-for="item in focusList"
                v-bind:key="item"
              >
                <div>
                  <img
                    class="picture-avatar2"
                    :src="item.user.avatar"
                    @click="OtherInfo(item.user.id)"
                  />
                  <span>{{ item.user.username }}</span>

                  <el-button
                    class="operation-btn focus"
                    style="float:right;"
                    @click="disfocus(item.id)"
                    >已关注</el-button
                  >
                  <el-divider></el-divider>
                </div>
              </li>
            </ul>

            <el-col class="hidden-xs-only" :span="6" :xs="0"></el-col>
          </el-tab-pane>
          <el-tab-pane label="我的评论">
            <div class="com" id="box">
              <ul class="msg-ul1">
                <li class="msg1" v-for="item in commentList" v-bind:key="item">
                  <img class="picture" :src="item.user.avatar" />
                  <i style="line-height:30px;margin-right:5px;"
                    >{{ item.user.username }}:</i
                  >&nbsp;
                  <span>{{ item.comment }}</span>

                  <el-popconfirm
                    title="确定删除吗？"
                    @onConfirm="Delete(item.id)"
                  >
                    <el-button slot="reference" style="float:right;"
                      >删除</el-button
                    >
                  </el-popconfirm>
                  <el-divider></el-divider>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
    <el-dialog
      title="修改信息"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      width="340px"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="头像图片链接" prop="avatar">
          <el-input v-model="form.avatar" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="个性签名" prop="sign">
          <el-input v-model="form.introduce" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>

        <el-button type="primary" @click="submitForm('form')">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "personal",
  props: {
    isHeadProfile: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      isMe: false,
      curr: 1,
      plateList: [],
      user: {
        fans: 0,
        allLike: 0,
      },
      categoryId: 0,
      dialogFormVisible: false,
      visible: false,
      form: {
        id: "",
        username: "",
        email: "",
        introduce: "",
        avatar: "",
      },
      rules: {
        avatar: [
          { required: true, message: "请输入图片链接", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { max: 10, message: "长度在 10 字符内", trigger: "blur" },
        ],
        email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
        introduce: [
          { required: true, message: "请输入个性签名", trigger: "blur" },
          { max: 30, message: "长度在 30 字符内", trigger: "blur" },
        ],
      },

      formLabelWidth: "50%",
      collectionList: [],
      focusList: [],
      commentList: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  created() {
    this.MyInfo();
    this.MyCollection(1);
    this.MyFocus(1);
    this.MyComment(1);
  },
  methods: {
    //上传头像
    handleAvatarSuccess(res, file) {
      console.log(res);
      console.log(file);
      console.log("upload success");
      //更新此处头像和本地头像
      this.user.avatar = res.data;
      this.$store.commit("SET_AVATAR", res.data);
    },

    //其他人的个人中心
    OtherInfo(userId) {
      const _this = this;
      this.isMe = false;
      this.$axios.post("/forum/user/view?id=" + userId).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          _this.user = res.data.data;
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },

    //取消关注
    disfocus(id) {
      const _this = this;
      this.$axios.post("/forum/focus/cancel?id=" + id).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.MyFocus(1);
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    //个人评论列表
    MyComment(currentPage) {
      const _this = this;
      const userId = this.$store.state.userInfo.id;
      this.$axios
        .post(
          "/forum/comment/uclist?currentPage=" +
            currentPage +
            "&userId=" +
            userId
        )
        .then((res) => {
          if (res.data.code === 200) {
            _this.commentList = res.data.data.records;
            _this.currentPage = res.data.data.current;
            _this.total = res.data.data.total;
            _this.pageSize = res.data.data.size;
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        });
    },

    //个人关注列表
    MyFocus(currentPage) {
      const _this = this;
      const userId = this.$store.state.userInfo.id;
      this.$axios
        .post(
          "/forum/focus/focusList?currentPage=" +
            currentPage +
            "&userId=" +
            userId
        )
        .then((res) => {
          if (res.data.code === 200) {
            _this.focusList = res.data.data.records;
            _this.currentPage = res.data.data.current;
            _this.total = res.data.data.total;
            _this.pageSize = res.data.data.size;
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        });
    },
    //个人所有收藏
    MyCollection(currentPage) {
      const _this = this;
      const userId = this.$store.state.userInfo.id;
      this.$axios
        .post(
          "/forum/collection/collectionList?currentPage=" +
            currentPage +
            "&userId=" +
            userId
        )
        .then((res) => {
          if (res.data.code === 200) {
            console.log(res);
            _this.collectionList = res.data.data.records;
            _this.currentPage = res.data.data.current;
            _this.total = res.data.data.total;
            _this.pageSize = res.data.data.size;
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        });
    },

    //个人详情信息
    MyInfo() {
      this.isMe = true;
      const _this = this;
      const id = this.$store.state.userInfo.id;
      this.$axios.post("/forum/user/view?id=" + id).then((res) => {
        if (res.data.code === 200) {
          _this.user = res.data.data;
          _this.form.id = res.data.data.id;
          _this.form.avatar = res.data.data.avatar;
          _this.form.username = res.data.data.username;
          _this.form.email = res.data.data.email;
          _this.form.introduce = res.data.data.introduce;
          if (_this.user.fans == null && _this.user.allLike == null) {
            _this.user.fans = 0;
            _this.user.allLike = 0;
          }
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this;
          this.$axios.post("/forum/user/update", this.form).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                message: res.data.msg,
                type: "success",
              });
              this.MyInfo();
            } else {
              this.$message({
                message: res.data.msg,
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除自己的评论
    Delete(id) {
      var _this = this;
      _this.$axios.post("/forum/comment/deleted?id=" + id).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.MyComment(1);
        } else {
          this.$message({
            message: res.data.msg,
            type: "error",
          });
        }
      });
    },
    //取消收藏
    DeleteCollection(id) {
      var _this = this;
      _this.$axios
        .post("/forum/collection/discollection?id=" + id)
        .then((res) => {
          if (res.data.code === 200) {
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.MyCollection(1);
          } else {
            this.$message({
              message: res.data.msg,
              type: "error",
            });
          }
        });
    },
    toEditUser() {
      this.$router.push("/setting");
    },
    async followUser() {
      let uId = this.$store.state.user.id;
      let result = !this.info.isFollow;
    },
    plate() {
      var _this = this;
      _this.$axios.post("/forum/category/list?curr=" + 1).then((res) => {
        console.log(res);
        _this.plateList = res.data.data.records;
        console.log(_this.plateList);
      });
    },
    selectMenu(index) {
      this.categoryId = this.plateList[index].id;
    },
  },
};
</script>

<style scoped>
#box * {
  vertical-align: middle;
}
.main {
  margin-top: 20px;
}
.info {
  align-items: center;
}
ul.base-info {
  overflow: hidden;
  width: 80%;
  margin-left: 30px;
  list-style: none;
  font-size: 13px;
  color: #72777b;
  line-height: 1.8;
}
.name {
  font-size: 25px;
  color: #111111;
}
.com {
  text-align: left;
  line-height: 30px;
  width: 100vh;
}
.personal-info {
  float: left;
  height: 100px;
}
.info {
  float: left;
  text-align: center;
}
.info-span {
  height: 40px;
  margin: 20px;
  width: 70vh;
  text-align: left;
}
.button-collect {
  float: left;
  height: 40px;
  margin: 20px 0px 20px 0px;
}
.div-info {
  width: 80vh;
  margin: 0 auto;
}
#ul-info {
  list-style: none;
}
#ul-info li {
  list-style: none;
  margin-bottom: 10px;
  font-size: 15px;
}
.el-card {
  text-align: left;
}

.picture-avatar {
  width: 80px;
  height: 80px;
  margin-left: 0px;
  margin-right: 5px;
  border-radius: 50%;
}
.picture-avatar2 {
  width: 50px;
  height: 50px;
  margin-left: 10px;
  border-radius: 50%;
}
h3 {
  margin: 0px 10px 10px 0px;
  vertical-align: middle;
}
.picture {
  width: 30px;
  height: 30px;
  margin-left: 0px;
  margin-right: 5px;
}
.message {
  text-align: left;
  line-height: 30px;
  color: #aaa;
}
.msg-ul {
  margin: 0px;
}
.msg {
  float: left;
  list-style: none;
  line-height: 30px;
  margin-right: 30px;
}
.msg1 {
  list-style: none;
  margin-bottom: 10px;
  margin-top: 10px;
}
.art-info {
  text-align: left;
}
.list-item {
  list-style: none;
  text-align: left;
  margin: 5px 0 8px 0;
}
.list-item .el-card:hover {
  box-shadow: 1px 2px 8px #74b9ff;
}
.art-abstract {
  flex: 1;
  color: #aaa;
  width: 700px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list-item .el-card:hover div.art-abstract {
  color: #34495e;
}
li.msg:hover {
  color: black;
}
.delete {
  float: right;
  color: #aaa;
  cursor: pointer;
}
.delete:hover {
  color: red;
}
</style>
